/**
app.js
 */
import React, {
	Component
} from 'react';
import {
	StyleSheet,
	Image,
	Text,
	View,
	Platform,
	BackAndroid,
	ToastAndroid
} from 'react-native';
//功能组件
import TabNavigator from 'react-native-tab-navigator';
//通用组件
import dp from '../common/pxToDp'
//页面组件
import Index from '../components/index/index'
import User from '../components/user/user'
import Login from './Login'
export default class Home extends Component {
	constructor(props) {
		super(props);
		this.state = {
			selectedTab: 'home',
		}
	}
	//控制物理BACK键返回主页事件
	event=()=>{
		const { navigator } = this.props;
   		const routers = navigator.getCurrentRoutes();
   		console.log('当前路由长度：' + routers.length);
   		if (routers.length > 2) {
	 		navigator.pop();
	 		return true;//接管默认行为
   		} else {
			//默认行为             return false
		    //阻止默认行为      return true
		    if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
		        //最近2秒内按过back键，可以退出应用。
		        return false;
		    }
		    this.lastBackPressed = Date.now();
			ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
	      	return true;
		}
	}


	componentWillMount() {
	    if (Platform.OS === 'android') {
	          BackAndroid.addEventListener('hardwareBackPress', this.event);
	    }
		this.setState({
			backTop:false
		})
  	}
  	componentWillUnmount() {
    	if (Platform.OS === 'android') {
     		BackAndroid.removeEventListener('hardwareBackPress', this.event);
    	}
  	}
	// 跳转路由
	goToLogin(){
		const { navigator } = this.props;
		if(navigator) {
			navigator.push({
				name: 'Login',
				component: Login,
			})
		}
	}
	render() {
		var homeView = (
			<Index navigator={this.props}/>
		);
		var settingView = (
			<View>
				<Text style={{fontSize:50}} onPress={this.goToLogin.bind(this)}>123</Text>
			</View>
		);
		return (
			<TabNavigator
				tabBarStyle={[s.content]}
				>
				<TabNavigator.Item
				    selected={this.state.selectedTab === 'home'}
				    title="首页"
					selectedTitleStyle={[s.selectedTitle]}
				    titleStyle={[s.fs14,s.titleStyle]}
				    renderIcon={() => <Image style={s.icon} source={require('../image/footicon/bt_com_menu_home_default.png')} />}
				    renderSelectedIcon={() => <Image style={s.icon} source={require('../image/footicon/bt_com_menu_home_active.png')} />}
				    onPress={() => this.setState({ selectedTab: 'home' })}>
				    {(<Index  navigator={this.props}/>)}
				</TabNavigator.Item>
				<TabNavigator.Item
				    selected={this.state.selectedTab === 'profile'}
				    title="分类"
					selectedTitleStyle={[s.selectedTitle]}
				    titleStyle={[s.fs14,s.titleStyle]}
				    renderIcon={() => <Image style={s.icon} source={require('../image/footicon/bt_com_menu_category_default.png')} />}
				    renderSelectedIcon={() => <Image style={s.icon} source={require('../image/footicon/bt_com_menu_category_active.png')} />}
				    onPress={() => this.setState({ selectedTab: 'profile' })}>
				    {settingView}
				</TabNavigator.Item>
				<TabNavigator.Item
				    selected={this.state.selectedTab === 'three'}
				    title="活动"
					selectedTitleStyle={[s.selectedTitle]}
				    titleStyle={[s.fs14,s.titleStyle]}
				    renderIcon={() => <Image style={s.icon} source={require('../image/footicon/bt_com_menu_event_default.png')} />}
				    renderSelectedIcon={() => <Image style={s.icon} source={require('../image/footicon/bt_com_menu_event_active.png')} />}
				    onPress={() => this.setState({ selectedTab: 'three' })}>
				    {settingView}
				</TabNavigator.Item>
				<TabNavigator.Item
				    selected={this.state.selectedTab === 'four'}
				    title="购物车"
					selectedTitleStyle={[s.selectedTitle]}
				    titleStyle={[s.fs14,s.titleStyle]}
				    renderIcon={() => <Image style={s.icon} source={require('../image/footicon/bt_com_menu_cart_default.png')} />}
				    renderSelectedIcon={() => <Image style={s.icon} source={require('../image/footicon/bt_com_menu_cart_active.png')} />}
				    onPress={() => this.setState({ selectedTab: 'four' })}>
				    {settingView}
				</TabNavigator.Item>
				<TabNavigator.Item
				    selected={this.state.selectedTab === 'five'}
				    title="我的"
					selectedTitleStyle={[s.selectedTitle]}
				    titleStyle={[s.fs14,s.titleStyle]}
				    renderIcon={() => <Image style={s.icon} source={require('../image/footicon/bt_com_menu_user_default.png')} />}
				    renderSelectedIcon={() => <Image style={s.icon} source={require('../image/footicon/bt_com_menu_user_active.png')} />}
				    onPress={() => this.setState({ selectedTab: 'five' })}>
				    {settingView}
				</TabNavigator.Item>
			</TabNavigator>
		);
	}
}


import styles from '../common/css';
const s = StyleSheet.create(Object.assign(styles, {
	icon: {
		width: 30,
		height: 30,
		marginBottom: -5,
	},
	content: {
		height: 50,
	},
	titleStyle:{
	},
	selectedTitle:{
		color:'#787b7f'
	}
}));
